// 获取元素tbody，后面要将表格内容和数据加到tbody上
const tbody = document.querySelector('#shop-tbody');
// 使用ajax异步发送请求，直接调用封装好的方法
// 这里的Ajax请求是在首页发送的，虽然代码在js目录下，但寻找文件的地址不用返回上一级
getData();
// 封装方法，方便其他功能调用
function getData () {
    utils.fetch('./api/shop/select.php').then(resp => {
        if (resp.code === 200) {
            // 使用ES6的解构赋值
            const { list } = resp.body;
            // const list = resp.body.list
            // 用一个字符串来存储表格和数据
            let str = '';
            // 循环数组把内容存起来
            // 数据库中的id值是唯一的，删除数据之后又添加新的数据不会占用已删除数据的id值
            // 用户看到的编号在删除之后新增会被占用，可以给数组一个自定义属性
            list.forEach((shop, index) => {
                str += `
                    <tr data-id="${shop.id}">
                        <td>${index + 1}</td>
                        <td><span>${shop.name}</span><input class="inputName" type="text"></td>
                        <td><span>${shop.price}</span><input class="inputPrice" type="text"></td>
                        <td><span>${shop.num}</span><input class="inputNum" type="text"></td>
                        <td><span>${shop.size}</span><input class="inputSize" type="text"></td>
                        <td>
                            <button class="btn btn-info btn-sm btn-customize-edit">编辑</button>
                            <button class="btn btn-danger btn-sm btn-customize-del">删除</button>
                            <button class="btn btn-success btn-sm btn-customize-sure">确定</button>
                            <button class="btn btn-warning btn-sm btn-customize-cancel">取消</button>
                        </td>
                    </tr>
                `
            })
            // 将字符串添加给tbody的内容
            tbody.innerHTML = str;
        }
    })
}